<template>
    <div>
        <el-row class="maina-tab-title">
            <el-col :span="24">
                <div class="flot-left">
                    <el-button type="primary" plain class="button-put" @click="addmessageSourceConfig()">{{'新增'}}</el-button>
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table 
                v-loading="loading"
                :data="mainTaskList" 
                border 
                :fit="true"
                :empty-text="M2('暂无数据')"
                style="width: 100%"
                @selection-change="handleSelectionChange" :height='changeMaxHeight()'
                :header-cell-style="{background:'#f5f7fa',color:'#606266',padding:'5px 0px'}"
             >
                <el-table-column type="selection" width="40" header-align='center'></el-table-column>
                <el-table-column  align="center" width="300">
                    <template slot="header">
                        {{M2('消息来源')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.origin}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="120">
                    <template slot="header">
                        <div>
                            {{M2('来源状态') }}
                        </div> {{M2('配置Title')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.statusValue}}</div>
                           <div>{{scope.row.title}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="120">
                    <template slot="header">
                        {{M2('消息类型')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.messageTypeValue}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="120">
                    <template slot="header">
                        {{M2('发送设置')}}
                    </template>
                    <template slot-scope="scope">
                        <span>
                           <div>{{scope.row.sendTypeValue}}</div>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="300">
                    <template slot="header">
                        {{M2('配置人员')}}
                    </template>
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            width="600"
                            popper-class="popper-h-class"
                            trigger="hover">
                            <div>
                                {{scope.row.employeeNames ? scope.row.employeeNames.join(',') : '--'}}
                            </div>
                            <div class="col-title-threeLine" slot="reference">
                                {{scope.row.employeeNames ? scope.row.employeeNames.join(',') : '--'}}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="300">
                    <template slot="header">
                        {{M2('配置角色')}}
                    </template>
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            width="600"
                            popper-class="popper-h-class"
                            trigger="hover">
                            <div>
                                {{scope.row.roleNames ? scope.row.roleNames.join(',') : '--'}}
                            </div>
                            <div class="col-title-threeLine" slot="reference">
                                {{scope.row.roleNames ? scope.row.roleNames.join(',') : '--'}}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="300">
                    <template slot="header">
                        {{M2('配置群聊')}}
                    </template>
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            width="600"
                            popper-class="popper-h-class"
                            trigger="hover">
                            <div>
                                {{scope.row.chatNames ? scope.row.chatNames.join(',') : '--'}}
                            </div>
                            <div class="col-title-threeLine" slot="reference">
                                {{scope.row.chatNames ? scope.row.chatNames.join(',') : '--'}}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column  align="center" width="120">
                    <template slot="header">
                        {{M2('备注')}}
                    </template>
                     <template slot-scope="scope">
                        <el-popover
                            placement="bottom"
                            width="600"
                            popper-class="popper-h-class"
                            trigger="hover">
                            <div>
                                {{scope.row.note}}
                            </div>
                            <div class="col-title-threeLine" slot="reference">
                                {{scope.row.note}}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="操作 / 记录"  width="220" align="center" fixed="right">
                    <template slot="header">
                        {{M2('操作 / 记录')}}
                    </template>
                    <template slot-scope="scope">
                        <el-button style="margin-left:0" type="text" @click="addmessageSourceConfig(scope.row)">编辑 |</el-button>
                        <el-button style="margin-left:0" type="text" v-if="scope.row.status == 0" @click="operationButton(scope.row)">退订 |</el-button>
                        <el-button style="margin-left:0" type="text" @click="openRecordDialog(scope.row.origin)">操作日志</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="page-box"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[50, 100, 200, 500]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!--改动记录-->
        <editMessageSourceDialog ref="editMessageSourceDialog" @mainListList="mainListList"></editMessageSourceDialog>
        <originSubscribeDialog ref="originSubscribeDialog"></originSubscribeDialog>
        <el-dialog
            :title="M2('修改日志')"
            :visible.sync="dialogVisible"
            width="1000px"
            :modal="false"
            top="100px"
            class="dialog-main"
            z-index="9999"
            @close="closeUploadDialog()"
            v-dialogDrag
            >
            <remarksNew :remarksParam='remarksParam' ref="remarksNew" v-if="showTenth"></remarksNew>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeUploadDialog()" size="mini">{{M2('关 闭')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import debounce from 'lodash.debounce';
import editMessageSourceDialog from '@/components/messageSourceConfig/editMessageSourceDialog'
import originSubscribeDialog from '@/components/messageSourceConfig/originSubscribeDialog'
import { getDingSendOriginByPage,getEmployee,delDingChatDefById } from '@/api/user.js'
import { GetFileServiceUrl,formatDate} from '@/utils/tools'
import remarksNew from '@/components/remarksNew.vue'
export default {
    components:{
        editMessageSourceDialog,
        originSubscribeDialog,
        remarksNew
    },
    data(){
        return {
            ruleForm:{},
            rules:{},
            uploadFilterList:{
                timeEnum: 500 ,//时间类型   全部(500)、今天(501)、三天内(502)、7天内(503)
                search: null, //搜索(供应商、开发ID、sku别名、sku、申请单号)
            },
            dialogVisible:false,
            showTenth:false,
            remarksParam:{},
            total:0,
            currentPage4:0,
            pageSize:50,
            pageNum:1,
            loading:false,
            mainTaskList:[],
            multipleSelection: [],
            renderDom :false,
            employee:{},
        }
    },
    props:{
        filterList:{
            default:() => ({})
        }
    },
    created: function() {
        this.mainListList()
    },
    watch:{
        filterList:{
            handler:function(val){
                this.pageNum = 1
                this.mainListList(val)
                this.uploadFilterList = val
            },
            deep:true
        },
    },
    computed:{
        scrollContainer(){
            return document.querySelector('.el-table__body-wrapper')
        },
    },
    methods:{
        operationButton(row){
           this.$refs.originSubscribeDialog.openCommonDialog(row.origin)
        },
        init(){
            getEmployee().then(res => {
                this.employee = res.data
            })
        },
        mainListList:debounce (function(val){
            if(!val) val = this.uploadFilterList
            this.loading = true
            let param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                status:val ? val.status : null ,//状态   1:未提交  2：待分配   3：样品确认中   4：结果输出中   5：合格    6：改进后通过(产前样)    7：不合格     8：已取消
                search:val && val.search ? val.search : null,//搜索(供应商、开发ID、sku别名、sku、申请单号)
                messageType:val ? val.messageType : null, 
                sendType:val  ? val.sendType : null, 
            }
            getDingSendOriginByPage(param).then(res => {
                this.mainTaskList = res.data.rows
                this.total = res.data.records;
                this.currentPage4 = res.data && res.data.pageNum ? res.data.pageNum : 1
                this.loading =false
            }).catch(res => {
                this.loading = false
            })       
        },500),
        //日志弹窗
        openRecordDialog(val){
            this.remarksParam = {
                productCountryId:`${val}`,
                noteBussinessName:'DingMessageDef_note',
                pageNum:0,
                PageIndex:-1,
                proImageList:GetFileServiceUrl(),
                mainBtn:false,
                Mark:null,
                showAllbutton:false,
                BusinessName:'DingMessageDef_note',
            }
            this.showTenth = true
            this.dialogVisible = true
        },
        closeUploadDialog(){
            this.showTenth = false
            this.dialogVisible = false
        },
        addmessageSourceConfig(row){
            this.$refs.editMessageSourceDialog.openCommonDialog(row)
        },
        deletemessageSourceConfig(){
            if(this.multipleSelection.length == 0 || this.multipleSelection.length > 1){
                this.error('请选择一条删除的数据！')
                return
            } 
            this.$confirm((`是否确认删除该条数据？`), { 
                confirmButtonText: this.M2('确定'),
                cancelButtonText: this.M2('取消'),
                type: 'warning'
                }).then(() => {
                    let param = {
                        id:this.multipleSelection[0].id,
                        name:this.multipleSelection[0].name,
                        status:Number(this.multipleSelection[0].origin),
                    }
                delDingChatDefById(param).then((res) => {
                    if(res.code == 200){
                        this.success('删除成功！')
                    }
                this.mainListList()
            }).catch(() => {
                return
            });
        }).catch(() => {
            return
        })
        },
        changeMaxHeight(){
            let nHeight = 0
            if(document.querySelector('.navbarContainer')){
                if(navigator.userAgent.indexOf('WebKit') > -1) {
                    nHeight = 90
                }else {
                    nHeight = 90
                }
                return window.innerHeight - document.querySelector('.navbarContainer').offsetHeight + 10 - nHeight  + 'px' 
            }
                return window.innerHeight - 255 + 'px' 
        },
        //时间格式修改
        formatDate(row) {
            if(row){
                return formatDate(row);
            }else {
                return ''
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.mainListList(this.uploadFilterList)
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.mainListList(this.uploadFilterList)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        success(msg) {
            this.$message({
                showClose: true,
                message:this.M2(msg),
                offset:220,
                duration: 2000,
                type: 'success'
            });
        },
        warning(msg) {
            this.$message({
                showClose: true,
                message: this.M2(msg),
                offset:220,
                type: 'warning'
            });
        },
        error(msg) {
            this.$message({
                showClose: true,
                message: msg,
                offset:220,
                type: 'error'
            });
        },
    }
}
</script>
<style scoped lang="scss">
.dropdown-class.el-dropdown-menu {
    width: 100px;
}
::v-deep.dialog-main {
    .el-dialog__header {
        padding: 10px 20px 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .el-dialog__body {
        padding: 10px 20px;
    }
}
.page-box{
    position: fixed;
    bottom: 10px;
    right: 30px;
}
.button-put{
    padding: 5px 10px;
    font-size: 12px;
}
.maina-tab-title{
    top: -2px;
    .flot-left{
        float: left;
    }
    .order-position{
        margin-left: 10px;
    }
}
.col-title-threeLine{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 20px;
    text-align: left;
}
.popper-h-class {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: clip;
}
</style>